<template>
  <div class="setting-base">
    <el-form
      ref="settingForm"
      class="setting-form"
      :rules="formDataRules"
      :model="formData"
      label-position="left"
      label-width="160px"
    >
      <el-form-item label="站点名称" prop="website_name">
        <el-input v-model="formData.website_name" placeholder="站点名称" />
      </el-form-item>
      <el-form-item label="高德地图Key" prop="map_key">
        <el-input v-model="formData.map_key" placeholder="高德地图Key" />
      </el-form-item>
      <el-form-item label="助力红包分成比例" prop="share_ratio" style="width: 300px;">
        <el-input v-model.number="formData.share_ratio">
          <div slot="append">%</div>
        </el-input>
      </el-form-item>
      <el-form-item label="最低红包金额限制" prop="low_red_money">
        <el-input v-model="formData.low_red_money" placeholder="最低红包金额限制(红包总额低于设置金额则不可以发红包，0=不限制)" />
      </el-form-item>
      <el-form-item label="开放发红包功能" prop="open_send">
        <el-switch
          v-model="formData.open_send"
          active-color="#13ce66">
        </el-switch>
        <router-link v-if="!formData.open_send" class="send-access" to="send-access">
          可发红包用户列表
        </router-link>
      </el-form-item>
      <el-form-item label="开启关注公众号功能" prop="open_attention">
        <el-switch
          v-model="formData.open_attention"
          active-color="#13ce66">
        </el-switch>
      </el-form-item>
      <el-form-item label="发红包提示关注公众号" prop="hint_attention">
        <el-switch
          v-model="formData.hint_attention"
          active-color="#13ce66">
        </el-switch>
      </el-form-item>
      <el-form-item label="审核卡券" prop="coupon_check">
        <el-switch
          v-model="formData.coupon_check"
          active-color="#13ce66">
        </el-switch>
      </el-form-item>
      <el-form-item label="系统敏感词" prop="sensitive_word">
        <el-input v-model="formData.sensitive_word" type="textarea" placeholder="系统敏感词,请用英文字符“,”分割" />
      </el-form-item>
      <el-form-item label="系统公告" prop="notice">
        <el-input v-model="formData.notice" type="textarea" placeholder="系统公告" />
      </el-form-item>
      <el-button type="primary" size="small" @click="submit">确认配置</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SettingBase',
  data() {
    return {
      formData: {
        website_name: '', // 站点名称
        map_key: '', // 高德地图Key
        share_ratio: 1, // 分享助力红包分成
        low_red_money: '0.00', // 红包最低金额限制
        open_send: false, // 是否对外开放发红包功能
        open_attention: false, // 是否开启关注公众号功能
        hint_attention: false, // 发红包是否提示关注公众号
        coupon_check: true, // 审核卡券
        sensitive_word: '', // 系统敏感词
        notice: '' // 系统公告
      },
      formDataRules: {
        website_name: [
          { required: true, message: '请输入站点名称', trigger: 'blur' },
          { max: 20, message: '不能超过20个字符', trigger: 'blur' }
        ],
        map_key: [
          { required: true, message: '请输入高德地图Key', trigger: 'blur' }
        ],
        share_ratio: [
          { required: true, message: '请输入红包分成比例', trigger: 'blur' },
          { type: 'number', max: 100, min: 1, message: '分成比例必须在1-100之间', trigger: 'blur' }
        ],
        low_red_money: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的金额', trigger: 'blur' }
        ],
        notice: [
          { max: 255, message: '不能超过255个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getSetting()
  },
  methods: {
    /**
     * 获取配置
     */
    getSetting() {
      this.$get('setting')
        .then((res) => {
          const {
            website_name,
            map_key,
            share_ratio,
            low_red_money,
            open_send,
            open_attention,
            hint_attention,
            coupon_check,
            sensitive_word,
            notice
          } = res.data.data
          this.formData = {
            website_name,
            map_key,
            share_ratio,
            low_red_money,
            open_send: !!open_send,
            open_attention: !!open_attention,
            hint_attention: !!hint_attention,
            coupon_check: !!coupon_check,
            sensitive_word,
            notice
          }
        })
    },
    /**
     * 提交
     */
    submit() {
      this.$refs.settingForm.validate((valid) => {
        if (valid) {
          const {
            website_name,
            map_key,
            share_ratio,
            low_red_money,
            open_send,
            open_attention,
            hint_attention,
            coupon_check,
            sensitive_word,
            notice
          } = this.formData
          this.$put('setting/base', {
            website_name,
            map_key,
            share_ratio,
            low_red_money,
            open_send: open_send ? 1 : 0,
            open_attention: open_attention ? 1 : 0,
            hint_attention: hint_attention ? 1 : 0,
            coupon_check: coupon_check ? 1 : 0,
            sensitive_word,
            notice
          })
            .then(() => {
              this.$message.success({
                message: '修改成功',
                type: 'success'
              })
            })
            .catch((error) => {
              this.$handleError(error)
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .setting-form{
    width: 600px;
  }
  .send-access{
    position: relative;
    top:1px;
    left:10px;
    display: inline-block;
    height: 40px;
    color: #2D8CF0;
    cursor: pointer;
    user-select: none;
  }
</style>
